.top_btn {
    width: 2.1rem;
    height: 2.1rem;
    background-image: url('../../assets/to_top.png');
    background-size: 100% 100%;
    position: fixed;
    z-index: 9;
    bottom: 2.8rem;
    right: 1rem;
    visibility: hidden;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    &.visible {
        animation-name: toIn;
    }

    &.hide {
        animation-name: hideOut;
    }

    @keyframes toIn {
        0% {
            transform: translate(0, 100%);
            opacity: 0;
            visibility: visible;
        }

        100% {
            transform: translate(0, 0);
            opacity: 1;
            visibility: visible;
        }
    }

    @keyframes hideOut {
        0% {
            transform: translate(0, 0);
            opacity: 1;
            visibility: visible;
        }
        100% {
            transform: translate(0, 100%);
            opacity: 0;
            visibility: hide;
        }        
    }
}